import React from "react";
import { Space, Table, Button, Modal } from "antd";
import { findById, remove } from "../../services/student";
import {useDispatch} from "react-redux";
import { setUpdateVisible,fetchStudent } from "../../store/slices/studentSlice";
const { Column } = Table;
const { confirm } = Modal;
export default function List(props) {
    let dispatch = useDispatch();
    const handleDelete = (id) => {
        confirm({
            title: "提示",
            content: "是否删除？",
            async onOk() {
                console.log(id);
                await remove(id);
                props.show();
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };
    const handleUpdate = async (id) => {
        // let student = await findById(id);
        // props.setStudent(student);
        // props.setIsModalOpen(true);
        // dispatch(setStudent(student));
        dispatch(fetchStudent(id));
        dispatch(setUpdateVisible(true));
    }
    const handleChange = (pagination) => {
        props.show({
            current:pagination.current,
            pageSize:pagination.pageSize
        });
    }
    return (
        <Table dataSource={props.students}
         pagination={props.pagination} rowKey="_id"
         onChange={handleChange}
         >
            <Column title="姓名" dataIndex="name" />
            <Column title="性别" dataIndex="gender" />
            <Column title="年龄" dataIndex="age" />

            <Column
                title="操作"
                key="action"
                render={(_, record) => (
                    <Space size="middle">
                        <Button type="primary" onClick={() => handleUpdate(record._id)}>修改</Button>
                        <Button
                            type="primary"
                            danger
                            onClick={() => handleDelete(record._id)}
                        >
                            删除
                        </Button>
                    </Space>
                )}
            />
        </Table>
    );
}
